<template>
  <ex-dialog
    width="600px"
    class="ex-diolog"
    :title="title"
    :visible="visible"
    @closeDialog="handleClose"
  >	
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" >
      <el-form-item label="声望名称:" prop="name">
				<el-input type="text" v-model="ruleForm.name" autocomplete="off" placeholder="请输入声望名称" maxlength="20" show-word-limit></el-input>
			</el-form-item>
      <el-form-item label="声望范围:" required>
				<div class="inputBox">
          <el-form-item label="" prop="rangeStart">
            <el-input type="text" v-model="ruleForm.rangeStart" autocomplete="off" placeholder="请输入开始声望" maxlength="8" show-word-limit></el-input>
          </el-form-item>
          <p class="dian">至</p>
          <el-form-item label="" prop="rangeEnd">
            <el-input type="text" v-model="ruleForm.rangeEnd" autocomplete="off" placeholder="请输入结束声望" maxlength="8" show-word-limit></el-input>
          </el-form-item>
        </div>
			</el-form-item>
		</el-form>
    <div slot="footer">
        <el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">确认提交</el-button>
				<el-button @click="handleClose('ruleForm')">取消</el-button>
    </div>
  </ex-dialog>
</template>
<script>
// api
import {
  addReputationV1,
  editReputationV1,
  reputationV1GetInfo,
} from '@/api/integralOperation'

export default {
  props: {
    visible: Boolean,
    id: String,
    pathType: String,
  },
  data() {
    return {
      loading: false,
      title: '新增声望配置',
      roleList: [],
			ruleForm: {
				name: '',//声望名称
				rangeStart: '',//请输入开始声望
        rangeEnd: '',//	请输入结束声望
      },
      flags: false,
			rules: {
        name:   [
          { required: true,message: '请输入声望名称',trigger: 'blur' }
        ],
        rangeStart: [
          { required: true,message: '请输入开始声望',trigger: 'blur' },
          { pattern: /^[1-9]\d*$|^0$/,message: '只能输入大于或等于零的整数',trigger: 'blur' },
        ],
        rangeEnd: [
          { required: true,message: '请输入结束声望',trigger: 'blur' },
          { pattern: /^[1-9]\d*$|^0$/,message: '只能输入大于或等于零的整数',trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
   
  },
  created() {
    if(this.pathType == 'edit'){
      this.title = '编辑声望配置'
      this.getDetail()
    } else if(this.pathType == 'add') {
      this.title = '新增声望配置'
    }   

	},
  methods: {
    //活动详情
    getDetail(){
      var id = this.id
      // console.log('id',id)
      reputationV1GetInfo(id).then(res => {
        this.ruleForm = res.result
      })
    },
    //新建子账号
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log('valid',valid)
        if (valid) {
          if(Number(this.ruleForm.rangeStart) > Number(this.ruleForm.rangeEnd) ){
            this.$message.error('开始声望不能大于结束声望')
            return
          }
           this.loading = true
          if(this.pathType == 'add'){
            var data = {
              ...this.ruleForm
            }
            console.log('data',data)
            addReputationV1(data).then(res => {
              this.handleSuccess("创建成功")
              setTimeout(() => {
                this.loading = false
              }, 1000);
            }).catch(()=>{
               this.loading = false
            }).finally(() => {

            })
          }else if(this.pathType == 'edit'){
            var data = {
              ...this.ruleForm,
              id:this.id
            }
            editReputationV1(data).then(res => {
              this.handleSuccess("修改成功")
              setTimeout(() => {
                this.loading = false
              }, 1000);
            }).catch(()=>{
               this.loading = false
            }).finally(() => {
            })
          }
           
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
		//取消
    handleClose(formName) {
      this.$emit('update:visible', false)
			// this.$refs[formName].resetFields();
    },
    handleSuccess(msg) {
      if (msg === '已拒绝') {
        var type = 'error'
      } else {
        var type = 'success'
      }
      this.$message({
        message: msg,
        type: type,
        duration: 1000,
        onClose: () => {
          this.handleClose()
          this.$emit('success')
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    // border: none !important;
		padding: 10px 0 !important;
    .el-button{
      margin: unset;
      &:first-child{
        margin-right: 20px;
      }
    }
  }
	::v-deep .ex--dialog--main {
    padding: 10px 20px !important; 
  }
}
.inputBox{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  .dian{
    width: 30px;
    text-align: center;
  }
  .el-input{
    width: 175px;
  }
}
::v-deep input::-webkit-outer-spin-button,
  ::v-deep input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  ::v-deep input[type='number'] {
    -moz-appearance: textfield !important;
  }
.el-input{
  width: 380px;
}
</style>